//welcome
<template>
  <div class='login-page'>
     <div class="welcome-box">
      <div class="welcomeBox">
      <van-circle v-model="welcomeCount"
          class="timer-cls"
          :clockwise="false"
          size="46px"
          layer-color="#fff"
          color="#30ccb5"
          @click.native.once="welcomeEvt"
          :text="`${Math.ceil(welcomeCount / 20)}s`"
      />
      <i class="icon"></i>
      <span class="title">做好医美一个就够了</span>
    </div>
     </div>
  </div>
</template> 

<script>
export default {
  name: '',
  props: {},
  components: {},
  data() {
    return {
      welcomeCount:100,
      welcomeTimer:null,
    };
  },
  created(){
    let timer = setInterval(()=>{
        this.welcomeCount--;
        //console.log(this.welcomeCount);
        if(this.welcomeCount<1){
          this.$router.push({path: '/Home'})
          clearInterval(timer)
        }
    },50)
  },
  methods: {
    welcomeEvt(){
      this.$router.push({path: '/Home'})
      // clearInterval(timer)
    }
  },
  mounted() {},

  computed: {},

  watch: {},

};
</script>

<style lang='scss' scoped>
 .login-page{
    position: relative;
    height: 100%;
    .welcome-box{
      height: 16rem;
      background: linear-gradient(to bottom,#c3ebe6,#fff);
      .welcomeBox{
        display: block;
        position: relative;
        height: 100%;
        padding-top: 30vh;
        .timer-cls{
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .icon{
            display: block;
            margin: auto;
            width: 86px;
            height: 86px;
            background: url("../../assets/logo.jpg") center center / 100% 100% no-repeat;
        }
        .title{
            display: block;
            text-align: center;
            font-size: 1.1rem;
            line-height: 1.6rem;
            padding-top: 2.67rem;
            letter-spacing: 1em;
            font-size: 1.1rem;
            color: #ababab;
        }
      }
    }
 }
</style>